<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="layout w-full h-full box-border bg-white p-[20px]" ref="RefLayout">
        <div class="search box-border pb-[20px]">
          <a-row justify="space-between">
            <span class="flex justify-start items-center">
              <a-input-search v-model="filterData.role_name" class="search-input" placeholder="请输入角色名称" @change="getRoleList" @search="getRoleList">
              </a-input-search>
            </span>
            <span>
              <a-button type="primary" @click="roleHandle('add')">新增</a-button>
            </span>
          </a-row>
        </div>
        <div
          class="table-box w-full overflow-hidden"
          :style="{ height: moreFilterKey ? 'calc(100% - 232px)' : 'calc(100% - 92px)' }"
        >
        <a-table
              :columns="(columns as any)"
              :data="list"
              :pagination="false"
              :scroll="{x: '100%', y: '100%'}"
            >
          <template #index="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
          <template #status="{ record }">
            <a-switch v-model="record.status" @change="handleChange(record)">
              <template #checked>
                开
              </template>
            </a-switch>
          </template>
            <template #operation="{ record }">
              <a-button type="text" @click="roleHandle('edit', record.id)">编辑</a-button>
              <a-button type="text" @click="$router.push({name: 'associatedInformationRole', query: { id: record.id, roleName: record.role_name }})">关联信息</a-button>
              <a-button type="text" @click="owenerHandle(record)">权限编辑</a-button>
              <a-button type="text" @click="FuncToRemoveRole(record.id)">删除</a-button>
            </template>
          </a-table>
        </div>
        <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
          <a-pagination
            :total="page.total"
            show-total
            show-page-size
            @page-size-change="handleSizeChange"
            @change="handleCurrentChange"
          />
        </div>
      </div>
      <RoleHandle :id="roleId" :visible="roleDrawVisiable" :handleType="handleType" @onClose="roleDrawClose"></RoleHandle>
      <OwenerEditHandle :id="roleId" :roleName="roleName" v-if="owenerDrawVisiable"  @onClose="owenerDrawClose" ></OwenerEditHandle>
      <a-modal v-model:visible="removePopKey" title-align="start" class="chunk-delete-box"  @ok="handleOk" @cancel="handleCancel">
        <template #title>
      是否确认删除该角色
    </template>
        <div class="chunk-delete-info-box">
          <icon-exclamation-circle-fill class="text-red-600" />
          删除后角色无法恢复
        </div>
        <template #footer>
          <div class="w-full h-full flex justify-end items-center">
            <a-button @click="removePopKey = false">取消</a-button>
            <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
          </div>
        </template>
      </a-modal>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue';
import PageMain from '@/components/PageBox.vue';
import RoleHandle from './components/RoleHandle.vue';
import OwenerEditHandle from './components/OwenerEditHandle.vue'
import type { roleList, roleItem, pageItem } from '@/api/roleManagement/roleManagement_type';
import { role_list, delRole, editRole, getRoleInfo } from '@/api/roleManagement/roleManagement'
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const RefLayout = ref();
const moreFilterKey = ref(false);
const filterData = ref<roleList>({
  role_name: ''
});
const handleType = ref();
const roleDrawVisiable = ref(false);
const roleId = ref();
const roleName = ref();
const owenerDrawVisiable = ref(false);
const page = ref<pageItem>({
  page: 1,
  page_size: 10,
  total: 0
});
const removePopKey = ref(false)
/**
 * @method table表格的标题
 */
const columns = [
{
    title: '排序',
    dataIndex: 'index',
    slotName: 'index',
    width: 80,
  },
  {
    title: '角色名称',
    dataIndex: 'role_name',
    slotName: 'role_name'
  },
  {
    title: '角色描述',
    dataIndex: 'role_desc',
    slotName: 'role_desc'
  },
  {
    title: '排序',
    dataIndex: 'order',
    slotName: 'order'
  },
  {
    title: '角色状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slotName: 'operation',
    width: 360,
    fixed: 'right',
    align: 'right',
    bodyCellClass: 'flex-right'
  }
];
/**
 * @method table表格的数据
 */
const list = ref([]);
// 获取角色列表
const getRoleList = () => {
  let params = {
    page: page.value.page,
    page_size: page.value.page_size
  }
  role_list({...params, ...filterData.value}).then(res => {
    const { code, data, total } = res
    data.forEach(item => {
      item.status = item.status == 1 ? true :false
    })
    if (code === 200) {
      list.value = data as roleItem
      page.value.total = total
    }
  })
};
/**
 * 
 * @param table操作项
 */
const roleHandle =  (type:string, id?:string) => {
    handleType.value = type;
  roleDrawVisiable.value = true;
  if(type == 'edit'){
    roleId.value = id;
    console.log(roleId.value)
  }
}
const roleDrawClose = (val:boolean) => {
  roleDrawVisiable.value = val;
  roleId.value = -1;
  getRoleList();
}
/**
 * @method 权限编辑
 */
 const owenerHandle = (record: any) => {
  roleName.value = record.role_name;
  roleId.value = record.id;
  owenerDrawVisiable.value = true;
}
const owenerDrawClose = () => {
  roleId.value = -1;
  owenerDrawVisiable.value = false;
}

/**
 * 
 * @param id 删除角色
 */
function FuncToRemoveRole(id: string) {
  removePopKey.value = true
  roleId.value = id
}
const toRemove = () => {
    removePopKey.value = false
    delRole({ role_id: roleId.value }).then(res => {
        if (res.code === 200) {
            Message.success("移除用户成功")
            getRoleList()
        } else {
          Message.error(res.message)
        }
    })
}
/**
* 删除提示框确认
*/
const handleOk = () => {

}
/**
* 删除提示框取消
*/
const handleCancel = () => {}
// 分页
const handleSizeChange = (e: number) => {
  page.value.page_size = e;
  getRoleList();
};
const handleCurrentChange = (e: number) => {
  page.value.page = e;
  getRoleList();
};
/**
 * 角色状态改变*/
const handleChange = (row:any) => {
  getRoleInfo({ role_id: row.id }).then((r) => {
    let params  = {
      role_id: row.id,
      role_name: row.role_name,
      status: row.status ? 1 : 2,
      order:  row.order,
      role_desc:  row.role_desc,
      org_code: r.data.org_code
    }
    editRole(params).then(res => {
      if (res.code === 200) {
        Message.success('状态修改成功');
        getRoleList()
      } else {
        Message.error(res.message)
        row.status = !row.status
      }
    })
  });
}
onMounted(() => {
  getRoleList()
})
</script>
<style lang="less">
.chunk-delete-box{
  .arco-modal-wrapper{
    .arco-modal{
      .arco-modal-header{
        border-bottom: 0!important;
      }
      .arco-modal-footer{
        border-top: 0!important;
      }
    }
  }
}
.arco-input-wrapper, .arco-select-view-single, .arco-picker, .arco-textarea{
  background: #fff;
  border: 1px solid #D3DBEB;
  border-radius: 4px;
}
.flex-right {
  .arco-table-cell {
    padding-right: 0;
  }
}
</style>
<style lang="less" scoped>
:deep(.arco-modal-header) {
  border: none;
}
:deep(.header-main-box) {
  border: none;
}
.layout {
  padding-top: 0 !important;
  margin-top: 8px;
}
.chunk-delete-info-box {
  color: #465A80;
  :deep(.arco-icon) {
    color: #FFAC38;
  }
}
.search-input {
  width: 328px;
}
:deep(.arco-table-th) {
  color: #394D73;
}
:deep(.arco-table-td) {
  color: #465A80;
}
</style>
